<template>
  <div>
    <el-dialog title="用户编辑" :visible.sync="openadd" width="33%">
      <!-- 编辑的区域 -->
      <div class="flex-between">
        <div class="flex-end w45">
          <span class="t1">用户编号:</span>
          <el-input
            prefix-icon="el-icon-star-off"
            placeholder="请输入用户iid"
            v-model="adddetail.useriid"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户图片:</span>
          <el-input
            placeholder="请输入用户图片地址"
            prefix-icon="el-icon-tickets"
            v-model="adddetail.userimg"
            style="width: 170px"
          />
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div class="flex-end w45">
          <span class="t1">用户姓名:</span>
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-star-off"
            v-model="adddetail.username"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户地址:</span>
          <el-input
            placeholder="请输入用户地址"
            prefix-icon="el-icon-tickets"
            v-model="adddetail.useraddress"
            style="width: 170px"
          />
        </div>
      </div>
      <div class="flex-between" style="margin-top: 25px">
        <div class="flex-end w45">
          <span class="t1">用户电话:</span>
          <el-input
            placeholder="请输入用户电话"
            prefix-icon="el-icon-star-off"
            v-model="adddetail.userphone"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户性别:</span>
          <el-select
            v-model="adddetail.usersex"
            placeholder="请选择用户性别"
            style="width: 170px"
            @change="bjchange2"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="flex-between" style="margin-top: 25px">
        <div class="flex-end w45">
          <span class="t1">用户邮箱:</span>
          <el-input
            placeholder="请输入用户邮箱"
            prefix-icon="el-icon-star-off"
            v-model="adddetail.useremail"
            style="width: 160px"
          />
        </div>
        <div class="flex-end w45">
          <span class="t1">用户级别:</span>
          <el-select
            v-model="adddetail.userjiebie"
            placeholder="请选择用户级别"
            style="width: 170px"
            @change="bjchange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="openadd = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
      <!-- 编辑结束 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "usertan",
  data() {
    return {
      options: [
        {
          value: "超管人员",
          label: "超管人员",
        },
        {
          value: "普管人员",
          label: "普管人员",
        },
        {
          value: "普通人员",
          label: "普通人员",
        },
      ],
      options2: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      adddetail: {
        useriid: "",
        userimg: "",
        username: "",
        userphone: "",
        useraddress: "",
        useremail: "",
        userjiebie: "",
        usersex: "",
      },
      openadd: false,
    };
  },
  methods: {
    // 编辑选择级别框改变的
    bjchange(e) {
      this.adddetail.userjiebie = e;
    },
    // 编辑选择性别框改变的
    bjchange2(e) {
      this.adddetail.usersex = e;
    },
    open() {
      this.openadd = true;
      this.adddetail = {
        useriid: "",
        userimg: "",
        username: "",
        userphone: "",
        useraddress: "",
        useremail: "",
        userjiebie: "",
      };
    },
    close() {
      this.openadd = false;
    },
    sure() {
      if (this.adddetail.useriid == "") {
        this.$message.error("请填写用户iid");
        return;
      }
      console.log("增加的用户详情", this.adddetail);
      this.$emit("adddetail2", this.adddetail);
    },
  },
};
</script>

<style scoped>
.w45 {
  width: 45%;
}
.t1 {
  padding-right: 10px;
  color: #545c64;
  font-weight: bold;
}
</style>
